<template>
  <CommonPage>
    <el-container>
      <el-aside width="250px">
        <dict-list v-model:currentDict="currentId"></dict-list
      ></el-aside>
      <el-main class="p-0!">
        <AppCrud ref="tableRef" :columns="columns" :get-data="renderDetail">
          <query-item label="名称">
            <el-input
              size="small"
              placeholder="请输入名称"
              allow-clear
            ></el-input>
          </query-item>
          <template #action>
            <el-button type="primary" @click="formEl?.onOpen('add')">
              <template #icon>
                <el-icon><Plus></Plus></el-icon>
              </template>
              新增字典项
            </el-button>
          </template>
        </AppCrud></el-main
      >
    </el-container>
  </CommonPage>
  <dict-form
    ref="formEl"
    type="字典项"
    @add="onAdd"
    @update="onUpdate"
  ></dict-form>
</template>

<script setup lang="ts">
import { AppCrud, CommonPage, QueryItem } from "@/components/common";
import { ElButton, ElMessage, ElMessageBox, ElSpace } from "element-plus";
import DictList from "./components/dict-list.vue";
import { ref } from "vue";
import dictApi, { DictDto, dictItemApi } from "@/api/dict";
import DictForm from "@/views/system/dict/components/dict-form.vue";
import { Plus } from "@element-plus/icons-vue";

defineOptions({ name: "Dict" });

const currentId = ref<string | null>(null);
const loading = ref(false);
const tableRef = ref();
const dictItemList = ref<any[]>([]);
const formEl = ref();
const columns = [
  {
    title: "字典项名称",
    dataIndex: "name",
  },
  {
    title: "字典项编码",
    dataIndex: "code",
  },
  {
    title: "备注",
    dataIndex: "remark",
  },
  {
    title: "排序",
    dataIndex: "weight",
  },
  {
    title: "操作",
    align: "center",
    width: 140,
    render: ({ record }: any) => {
      return h(
        ElSpace,
        {},
        {
          default: () => [
            h(
              ElButton,
              {
                size: "small",
                type: "primary",
                onClick: () => formEl.value?.onOpen("edit", record),
              },
              {
                default: () => "编辑",
              },
            ),
            h(
              ElButton,
              {
                size: "small",
                danger: true,
                onClick: () => handleDelete(record),
              },
              {
                default: () => "删除",
              },
            ),
          ],
        },
      );
    },
  },
];

watch(currentId, () => {
  tableRef.value?.handleSearch();
});

function handleDelete(record: any) {
  ElMessageBox.confirm(`确认删除【${record.name}】?`, "提示").then(() => {
    dictItemApi(currentId.value!)
      .delete(record.id!)
      .then(() => {
        ElMessage.success("删除成功");
        tableRef.value?.handleSearch();
      });
  });
}

const onAdd = (form: DictDto, callback: Function) => {
  dictItemApi(currentId.value!)
    .create(form)
    .then(() => {
      tableRef.value?.handleSearch();
      callback();
    });
};
const onUpdate = (form: any, callback: Function) => {
  dictItemApi(currentId.value!)
    .update(form.id, form)
    .then(() => {
      tableRef.value?.handleSearch();
      callback();
    });
};

async function renderDetail() {
  if (currentId.value) {
    loading.value = true;
    return await dictApi.get(currentId.value).then(({ data }: any) => {
      dictItemList.value = data.items;
      loading.value = false;
      return {
        data: {
          record: data.items,
          total: data.items.length,
          page: 1,
          size: 10,
        },
      };
    });
  }
}
</script>

<style scoped></style>
